<template>
	<view>
		<up-popup mode="bottom" :show="state.show" round="10" @close="close">
			<view class="ss-modal-box bg-white">
				<view class="modal-header">产品参数</view>
				<scroll-view class="modal-content ss-p-t-50" scroll-y="true" :scroll-with-animation="true"
					:show-scrollbar="false" @touchmove.stop>
					<view class="sale-item ss-flex ss-col-top" v-for="item in modelValue" :key="item.title">
						<view class="item-title">{{ item.title }}</view>
						<view class="item-value">{{ item.content }}</view>
					</view>
				</scroll-view>
				<view class="modal-footer ss-flex ss-row-center ss-m-b-20">
					<view class="save-btn" @click="state.show = false">确定</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';

	const props = defineProps({
		modelValue: {
			type: Object,
			default () {
				return [];
			},
		},
	});
	const state = reactive({
		show: false,
		paramsTitle: computed(() => {
			let titleArray = [];
			props.modelValue.map((item) => {
				titleArray.push(item.title);
			});
			return titleArray.join(' · ');
		}),
	});

	function close() {
		state.show = false;
	}

	function open() {
		console.log(123123);
		state.show = true;
	}
	defineExpose({
		open
	});
</script>

<style lang="scss" scoped>
	.ss-flex {
		display: flex;
	}

	.ss-modal-box {
		border-radius: 30rpx 30rpx 0 0;
		max-height: 730rpx;
		background: #F7F8FA;

		.modal-header {
			position: relative;
			padding: 30rpx 20rpx 40rpx;
			font-size: 36rpx;
			font-weight: bold;
		}

		.modal-content {
			padding: 0 30rpx;
			max-height: 500rpx;
			box-sizing: border-box;

			.sale-item {
				margin-bottom: 24rpx;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid rgba(#dfdfdf, 0.4);

				.item-title {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 42rpx;
					width: 120rpx;
					white-space: normal;
				}

				.item-value {
					font-size: 26rpx;
					font-weight: 400;
					// color: $dark-9;
					line-height: 42rpx;
					flex: 1;
					margin-left: 20rpx;
				}
			}
		}

		.modal-footer {

			.save-btn {
				width: 686rpx;
				height: 88rpx;
				background: #D1986F;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				text-align: center;
				line-height: 88rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				margin: auto;
				margin-top: 52rpx;
				margin-bottom: 68rpx;
			}
		}
	}
</style>